<template>
	<view class="user-container">
		<!-- 用户信息区域 -->
		<view class="user-section">
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="info-box">
					<text class="username">{{userInfo.username}}</text>
					<text class="phone">{{userInfo.phone}}</text>
				</view>
			</view>
		</view>
		
		<!-- 订单区域 -->
		<view class="order-section">
			<view class="order-title">
				<text>我的订单</text>
				<view class="all-order" @click="navTo('/pages/order/list')">
					<text>全部订单</text>
					<text class="icon">></text>
				</view>
			</view>
			
			<view class="order-items">
				<view class="order-item" @click="navTo('/pages/order/list?status=0')">
					<text class="order-icon">待付款</text>
					
				</view>
				<view class="order-item" @click="navTo('/pages/order/list?status=1')">
					<text class="order-icon">待发货</text>
					
				</view>
				<view class="order-item" @click="navTo('/pages/order/list?status=2')">
					<text class="order-icon">待收货</text>
					
				</view>
				<view class="order-item" @click="navTo('/pages/order/list?status=3')">
					<text class="order-icon">已完成</text>
					
				</view>
			</view>
		</view>
		<!-- 菜单区域 -->
		<view class="menu-section">
			<view class="menu-item" @click="switchAccount">
				<text class="menu-title">切换账号</text>
				<text class="menu-arrow">></text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getToken, clearUserData } from '@/utils/storage.js'
	
	export default {
		data() {
			return {
				hasLogin: true,
				userInfo: {
					username: '测试用户',
					phone: '13800138000',
					avatar: '/static/login.jpg'
				},
				orderCounts: {
					unpaid: 0,
					unshipped: 0,
					unreceived: 0,
					completed: 0
				}
			}
		},
		onLoad() {
			// 初始化时直接获取订单数量
			this.getOrderCounts();
		},
		onShow() {
			// 每次显示页面时获取订单数量
			this.getOrderCounts();
		},
		methods: {
			navToLogin() {
				uni.navigateTo({
					url: '/pages/index/log/login'
				});
			},
			
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			
			switchAccount() {
				uni.showModal({
					title: '切换账号',
					content: '是否确认退出当前账号并切换到其他账号？',
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if(res.confirm) {
							// this.logout();
							setTimeout(() => {
								this.navToLogin();
							}, 500);
						}
					}
				});
			},
			
			logout() {
				// 清除本地存储的token和用户信息
				clearUserData();
				uni.removeStorageSync('userInfo');
				
				// 更新状态
				this.hasLogin = false;
				this.userInfo = {};
				
				// 提示用户
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				});
			},
			
			getOrderCounts() {
				// 模拟获取各种状态的订单数量
				this.orderCounts = {
					unpaid: 2,
					unshipped: 1,
					unreceived: 3,
					completed: 5
				};
			}
		}
	}
</script>

<style lang="scss">
.user-container {
	padding-bottom: 50rpx;
	background-color: #f8f8f8;
}

.user-section {
	background-color:#ffe5fc;
	background-size: cover;
	background-position: center;
	position: relative;
	height: 360rpx;
	padding: 20rpx 30rpx;
	
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	
	.user-info-box {
		display: flex;
		align-items: center;
		margin-top: 120rpx;
		
		.portrait-box {
			width: 130rpx;
			height: 130rpx;
			border: 6rpx solid #fff;
			border-radius: 50%;
			overflow: hidden;
			
			.portrait {
				width: 100%;
				height: 100%;
			}
		}
		
		.info-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			
			.username {
				font-size: 36rpx;
				color: #fff;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			
			.phone {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
		
		.login-btn, .setting-btn {
			padding: 10rpx 30rpx;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 30rpx;
			
			text {
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
}

.order-section {
	margin: 20rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 15rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	
	.order-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		
		text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.all-order {
			display: flex;
			align-items: center;
			
			text {
				font-size: 28rpx;
				color: #999;
				font-weight: normal;
			}
			
			.icon {
				margin-left: 10rpx;
			}
		}
	}
	
	.order-items {
		display: flex;
		justify-content: space-between;
		
		.order-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			
			.order-icon {
				font-size: 28rpx;
				color: #666;
				margin-top: 10rpx;
			}
			
			.order-count {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				min-width: 36rpx;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 6rpx;
				background-color: #FF5151;
				border-radius: 18rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
			}
		}
	}
}

.menu-section {
	margin: 20rpx;
	padding: 0 30rpx;
	background-color: #fff;
	border-radius: 15rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	
	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.menu-title {
			font-size: 30rpx;
			color: #333;
			
			&.logout {
				color: #FF5151;
			}
		}
		
		.menu-arrow {
			font-size: 28rpx;
			color: #ccc;
		}
	}
}
</style> 